<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="includes/common :: header-css"/>
</head>
<body style="padding: 10px;">
<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">模板名称</label>
        <div class="layui-input-block">
            <input type="text" name="templateName" placeholder="请输入模板名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">模板类型</label>
        <div class="layui-input-block">
            <input type="text" name="templateType" placeholder="请输入模板类型" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">模板文件</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传zip压缩包
            </button>
            <!--<br><br>
            <div style="width:200px;height:200px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
                <img style="max-width: 200px;max-height:200px;" id="preview">
            </div>-->
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="commit">立即提交</button>
        </div>
    </div>
</div>

<div th:replace="includes/common :: js"></div>
<script>
    layui.use(['form', 'upload', 'layer'], function(){
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.jquery;

        upload.render({
            elem: '#upload',
            url: '/api/editTemplate',
            auto: false, // 选择文件后不自动上传
            accept: 'file',
            bindAction: '#commit',
            // 上传前的回调
            before: function () {
                this.data = {
                    templateName: $('input[name="templateName"]').val(),
                    templateType: $('input[name="templateType"]').val()
                }
            },
            // 选择文件后的回调
            // choose: function (obj) {
            //     obj.preview(function (index, file, result) {
            //         $('#preview').attr('src', result);
            //     })
            // },
            // 操作成功的回调
            done: function (res, index, upload) {
                var code = res.metaStatus === "success" ? 1 : 2;
                layer.alert(res.metaMessage, {icon: code}, function () {
                    parent.window.location.reload();
                })
            },
            // 上传错误回调
            error: function (index, upload) {
                layer.alert('上传失败！' + index);
            }
        });
    });
</script>
</body>
</html>